<template>
  <div class="user-nav-menu">
    <el-menu mode="horizontal" :default-active="activeMenu" @select="handleMenuSelect" class="centered-menu">
      <el-menu-item index="profile">
        <el-icon><User /></el-icon>
        个人中心
      </el-menu-item>
      <el-menu-item index="orders">
        <el-icon><List /></el-icon>
        我的订单
      </el-menu-item>
      <el-menu-item index="address">
        <el-icon><Location /></el-icon>
        收货地址
      </el-menu-item>
      <el-menu-item index="wishlist">
        <el-icon><Star /></el-icon>
        心愿单
      </el-menu-item>
      <el-menu-item index="recent">
        <el-icon><View /></el-icon>
        最近查看
      </el-menu-item>
      <el-menu-item index="ai-chat">
        <el-icon><ChatDotRound /></el-icon>
        AI 助手
      </el-menu-item>
      <el-menu-item index="logout" class="logout-item">
        <el-icon><SwitchButton /></el-icon>
        退出登录
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessageBox } from 'element-plus'
import { 
  User, 
  List, 
  Location, 
  Star, 
  View, 
  ChatDotRound,
  SwitchButton
} from '@element-plus/icons-vue'

const props = defineProps({
  activeMenu: {
    type: String,
    required: true
  }
})

const router = useRouter()
const userStore = useUserStore()

const handleMenuSelect = (key) => {
  if (key === 'logout') {
    ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      userStore.logout()
      router.push('/login')
    }).catch(() => {})
    return
  }
  
  const routes = {
    profile: '/profile',
    orders: '/orders',
    address: '/address',
    wishlist: '/wishlist',
    recent: '/recent-views',
    'ai-chat': '/ai-chat'
  }
  
  if (routes[key]) {
    router.push(routes[key])
  }
}
</script>

<style scoped>
.user-nav-menu {
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center; /* 水平居中 */
}

.centered-menu {
  display: flex;
  justify-content: center; /* 水平居中菜单项 */
  width: 100%;
  border-bottom: none;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
  justify-content: center;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
}

:deep(.el-menu-item .el-icon) {
  margin-right: 5px;
}

.logout-item {
  margin-left: 20px; /* 调整为固定间距，不再使用auto */
  color: var(--el-color-danger);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-nav-menu {
    overflow-x: auto;
  }
  
  :deep(.el-menu--horizontal) {
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start; /* 在小屏幕上改为左对齐，可以滚动查看 */
  }
  
  :deep(.el-menu-item) {
    padding: 0 15px;
  }
  
  .logout-item {
    margin-left: 0; /* 在小屏幕上取消特殊间距 */
  }
}
</style> 